Liveclicker allows you to create custom LiveSocial appearances using CSS.
Create a Custom CSS
There are 2 ways in which a new CSS can be configured:
From the Account Settings
1. To configure a new CSS, go to the Account Settings in the top menu, and then navigate to Realtime content>LiveSocial:
2. Activate the Appearance tab:
3. Click Add New +. A Window is loaded in which the proposed CSS code can be modified.
4. Start by naming the appearance.
5. Make the necessary changes in the CSS.
6. When done, click Add LiveSocial Appearance. The custom CSS can now be used in your LiveSocial elements.
From the Liveclicker campaign
1. Click on the appearance drop-down and select Create new custom appearance.
2. Name your Custom Appearance. The CSS code editor is displayed.
3. Insert your custom CSS, and click the Save.
Best Practices for creating LiveSocial Appearances in CSS
LiveSocial appearances come in three different presentation themes by default: Complete, Simple and Minimal. Themes are pre-built templates you can slightly modify, however, if you need a custom presentation it is appropriate to create your own CSS.
In order to create a CSS presentation for your feeds, you should first take a look at the HTML file that's used to generate the feed. Right-click on the feed image and open the iFrame in a new window to get the feed page.
Continue to make changes to your stylesheet and keep using the iFrame page as a reference for your style selectors.
Tip: Keep a tab open on the iFrame page and a tab open on the code editor. That way you can edit your CSS and then refresh your iFrame in parallel to see how your changes render. Also, it is advised that you use a WebKit-based browser such as Google Chrome or Apple Safari during this process, since the final rendering engine used by Liveclicker to create the image embeds is WebKit-based.
An overview of the different CSS selectors for the social channels
Below you can find an overview of the CSS elements within a social network feed.
CSS Selectors: Pinterest LiveSocial
CSS Selectors: YouTube LiveSocial
CSS Selectors: Instagram LiveSocial
CSS Selectors: Bazaarvoice LiveSocial
CSS Selectors: PowerReviews LiveSocial
Custom CSS: Curalate livesocial
Below is an example of the CSS styles used for a Curalate feed with square images, you can use this as a starting point for your custom appearance:
.post {
display: flex;
margin-bottom: 10px;
width: 31%;
float: left;
}
.curalate .image {
margin: 0 auto;
overflow: hidden;
width: 124px;
height: 124px;
justify-content: center;
align-items: center;
display: flex;
}
.image img {
max-width: 150%;
}You can use the CSS below in order to have the social handle overlaid over each image post:
.post {
border-bottom: none;
}
.message, .meta-data, .timestamp {
display: none;
}
.the-post {
position: relative;
}
.profile-name, .handle {
display: block !important;
position: absolute;
float: left;
bottom: 2%;
left: 2%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 97%;
}
If you wish to add the @ sign before the social handle to reflect that these are usernames, you can use this CSS:
.profile-name:before, .handle:before {
content:"@";
}CSS Selectors: Spotify LiveSocial
